<template>
  <div class="detail">
    <nav-bar class="nav-bar nav-border" :class="isShow ? '' : 'show'">
      <p slot="left" @click="backFilm" class="titleLeft">
        <img src="~assets/img/zuojiantou.png" alt="" />
      </p>
      <p slot="center">{{ filmInfo.name }}</p>
    </nav-bar>
    <nav-bar class="nav-bar nav-bar-bg nav-border">
      <p slot="left" @click="backFilm" class="titleLeft">
        <img src="~assets/img/zuojiantou.png" alt="" />
      </p>
    </nav-bar>
    <scroll class="scoll-box" ref="myScroll" :probeType="2" @scroll="scrollPosition">
      <div class="bigImg">
        <img :src="filmInfo.poster" alt="" />
      </div>
      <div class="main-content">
        <div class="film-name">
          <div class="film-name-left">
            <span>{{ filmInfo.name }}</span>
            <movie-type :filmType="flimType" />
          </div>
          <div class="film-name-right" v-if="filmInfo.grade">
            <span>{{ filmInfo.grade }}</span
            >分
          </div>
        </div>
        <div class="grey-text">{{ filmInfo.category }}</div>
        <div class="grey-text">{{ filmInfo.premiereAt | getFormateTime('YYYY-MM-DD') }} 上映</div>
        <div class="grey-text">{{ filmInfo.nation }} | 分钟</div>
        <div class="grey-text synopsis-box" :style="altitude">
          <p ref="synopsisP">{{ filmInfo.synopsis }}</p>
        </div>
      </div>
      <div class="iconfont" :class="isFold ? 'icon-jiantouxia' : 'icon-jiantoushang'" @click="arrowsClick"></div>
      <div class="film-actor">
        <p class="film-stardom">演职人员</p>
        <swiper-l ref="swiperActor" class="swiper-actors-box">
          <div v-for="item in filmInfo.actors" class="swiper-slide swiper-slide-actors">
            <div class="img-box">
              <img :src="item.avatarAddress" alt="" class="img-actors" @load="imgLoad" />
            </div>
            <p>{{ item.name }}</p>
            <span class="">{{ item.role }}</span>
          </div>
        </swiper-l>
      </div>
      <div class="film-actor">
        <p class="film-stardom film-photo">
          <span>剧照</span>
          <span class="span-right" @click="addMaskLayer">全部({{ photosLength }}) ></span>
        </p>
        <swiper-l ref="swiperPhotos" class="swiper-actors-box">
          <div v-for="item in filmInfo.photos" class="swiper-slide swiper-slide-slide" :key="item">
            <div class="img-box swiper-slide-photos">
              <img :src="item" alt="" class="img-actors" />
            </div>
          </div>
        </swiper-l>
      </div>
    </scroll>
    <div class="tabBottom">选座购票</div>
    <convering v-show="isCover">
      <nav-bar class="nav-bar">
        <p slot="left" @click="isCover = false" class="titleLeft">
          <img src="~assets/img/zuojiantou.png" alt="" />
        </p>
        <p slot="center">{{ filmInfo.name }}</p>
      </nav-bar>
      <div class="photos-box">
        <img :src="item" alt="" v-for="item in filmInfo.photos" :key="item" />
      </div>
    </convering>
  </div>
</template>

<script>
import Swiper from 'swiper'
import { VueDebounce } from '@/common/utils'
import { movieDetail } from '@/network/detail'
import MovieType from '@/components/content/movieType/MovieType'
import SwiperL from 'components/common/swiper/SwiperL.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import Convering from 'components/content/covering/Convering.vue'
export default {
  name: 'Detail',
  components: { MovieType, SwiperL, Scroll, Convering },
  data() {
    return {
      filmId: this.$route.params.id,
      filmInfo: {},
      isFold: true,
      actualHeight: 0,
      isShow: false,
      // 判断遮盖层
      isCover: false,
      //控制返回是否执行防抖函数的最后一次
      flag: true
    }
  },
  created() {
    this.getMovieDetail()
  },
  updated() {
    this.actualHeight = this.$refs.synopsisP.offsetHeight
  },

  methods: {
    async getMovieDetail() {
      const { data: res } = await movieDetail(this.filmId)
      this.filmInfo = res.film
    },
    backFilm() {
      this.$router.back()
      this.flag = false
    },
    // 控制箭头的事件
    arrowsClick() {
      this.isFold = !this.isFold
    },
    initialize() {
      if (this.flag) {
        new Swiper(this.$refs.swiperActor.$el, {
          slidesPerView: 4,
          spaceBetween: 15
        })
        new Swiper(this.$refs.swiperPhotos.$el, {
          slidesPerView: 2.1,
          spaceBetween: 15
        })
        this.$refs.myScroll.refresh()
      }
    },
    //监听图片加载完毕事件 并进行防抖处理
    imgLoad: VueDebounce('initialize', 20),
    // 判断滚动距离是否大于45
    scrollPosition({ y }) {
      this.isShow = 45 < -y ? true : false
    },
    // 添加遮罩层
    addMaskLayer() {
      this.isCover = true
    }
  },
  computed: {
    flimType() {
      return this.filmInfo.item ? this.filmInfo.item.name : {}
    },
    photosLength() {
      return this.filmInfo.photos ? this.filmInfo.photos.length : 0
    },
    // 判断高度
    altitude() {
      return this.isFold ? { height: '27px' } : { height: this.actualHeight + 'px' }
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  height: 100vh;
  position: relative;
  z-index: 100;
  background: white;
}
.nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: all 0.6s;
  .titleLeft {
    img {
      height: 0.3rem;
      width: 0.3rem;
    }
  }
}
.nav-bar-bg {
  background: rgba($color: #000000, $alpha: 0);
}
.show {
  opacity: 0;
}
.scoll-box {
  height: calc(100% - 0.49rem);
}

.bigImg {
  height: 2.1rem;
  overflow: hidden;
  position: relative;
  img {
    width: 100%;
    position: absolute;
    top: -80%;
  }
}
.main-content {
  padding: 0.15rem;
}
.film-name {
  height: 0.24rem;
  display: flex;
  justify-content: space-between;
  .film-name-left {
    display: flex;
    height: 100%;
    width: 2.5rem;
    align-items: center;
    span {
      font-size: 0.18rem;
    }
  }
  .film-name-right {
    line-height: 0.24rem;
    font-size: 18px;
    font-style: italic;
    text-align: right;
    color: #ffb232;
  }
}
.grey-text {
  font-size: 13px;
  color: #797d82;
  margin-top: 4px;
}
.synopsis-box {
  margin-top: 0.12rem;
  transition: all 0.6s;
  overflow: hidden;
}

.iconfont {
  text-align: center;
  font-size: 0.12rem;
}
.film-actor {
  border-top: 0.15rem solid #f4f4f4;
  text-align: center;
}
.film-stardom {
  padding: 0.15rem;
  font-size: 16px;
  text-align: left;
  color: #191a1b;
}
.film-photo {
  display: flex;
  justify-content: space-between;
  .span-right {
    font-size: 13px;
    color: #797d82;
  }
}
.swiper-actors-box {
  padding: 0 0.15rem 0.15rem 0.15rem;
  .swiper-slide-actors {
    width: 0.85rem !important;
    .img-box {
      height: 0.85rem;
      width: 0.85rem;
      overflow: hidden;
      .img-actors {
        width: 0.85rem;
        transform: translateY(-10%);
      }
    }

    p {
      margin-top: 0.1rem;
      font-size: 0.12rem;
      color: #191a1b;
      margin-bottom: 0.05rem;
    }
    span {
      font-size: 10px;
      color: #797d82;
    }
  }
  .swiper-slide-photos {
    height: 1rem;
    width: 1.5rem;
    background: #eee;
    overflow: hidden;
    display: flex;
    align-items: center;
    img {
      width: 100%;
    }
  }
}
.tabBottom {
  height: 0.49rem;
  width: 100%;
  text-align: center;
  background-color: #ff5f16;
  color: #fff;
  font-size: 0.16rem;
  line-height: 0.49rem;
}

.photos-box {
  margin-top: 0.44rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  img {
    width: calc(33.33333vw - 0.025rem);
    height: calc(33.33333vw - 0.025rem);
    margin-bottom: 0.015rem;
    margin-right: 0.015rem;
  }
}
::v-deep .nav-border {
  border-bottom: none;
}
</style>